<template>
  <div class="custom_card animate__animated animate__fadeInUp">
    <div class="custom_card_panel">
      <img :src="item.image" v-lazy="item.image" />
      <article class="custom_card_content">
        <header class="custom_card_content_header">
          <van-tag
            color="#fea82f"
            v-for="(tag, index) in item.tags"
            :key="'tag_index_' + index"
            >标签</van-tag
          >
          <h1>{{ item.title }}</h1>
        </header>
        <p class="custom_card_content_desc">{{ item.desc }}</p>
        <div class="custom_card_content_list">
          <ul>
            <li
              v-for="(listItem, index) in item.data"
              :key="'card_list_index_' + index"
            >
              <van-icon name="checked" color="#81b214" />{{ listItem.content }}
            </li>
          </ul>
        </div>
        <a :href="item.url" target="_blank" class="custom_card_content_more"
          >{{ $t("lang.了解更多") }}&gt;</a
        >
      </article>
    </div>
  </div>
</template>
<script>
export default {
  name: "card",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_card {
  padding: (5 / @base) 0;
  .custom_card_panel {
    box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
    border-radius: (5 / @base);
    background-color: #fff;
    margin: (5 / @base);
    overflow: hidden;
    text-align: left;
    img {
      width: 100%;
      height: (137 / @base);
      background-color: #999;
    }
    .custom_card_content {
      padding: (5 / @base) (10 / @base) (15 / @base) (10 / @base);
      font-size: (14 / @base);
      .custom_card_content_header {
        font-size: (14 / @base);
        padding: (5 / @base) 0 0;
        .van-tag {
          margin: 0 (5 / @base) 0 0;
          padding: (2.5 / @base) (5 / @base);
          line-height: (14 / @base);
          background-color: #fea82f;
        }
        h1 {
          padding: (5 / @base) 0;
        }
      }
      .custom_card_content_desc {
        padding: (5 / @base) 0;
        overflow: hidden;
        white-space: normal;
      }
      .custom_card_content_list {
        padding: (10 / @base) 0;
        ul {
          li {
            padding: (5 / @base) 0;
            font-size: (12 / @base);
            overflow: hidden;
            white-space: normal;
            .van-icon {
              margin: 0 (5 / @base) 0 0;
              vertical-align: middle;
            }
          }
        }
      }
      .custom_card_content_more {
        font-size: (12 / @base);
        display: block;
        text-align: right;
        color: #0061a8;
      }
    }
  }
}
@keyframes fadeInUp {
  0% {
    transform: translate3d(0, 10%, 0);
  }
}
</style>
